/*
 * @Description: general styles
 * @Version: 1.1.12.20220307
 * @Author: Arvin Zhao
 * @Date: 2021-12-06 22:03:43
 * @Last Editors: Arvin Zhao
 * @LastEditTime: 2022-03-08 10:21:24
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --tab-bar-height: 40px; /* This should be the same as "global.common.TAB_BAR_HEIGHT". */
  }

  body {
    @apply bg-transparent dark:bg-black selection:bg-indigo-600 dark:selection:bg-cyan-400 selection:text-white dark:selection:text-black;
  }
}

@layer components {
  /* Left floating action button. */
  .btn-action-left {
    @apply fixed left-4 sm:left-6 lg:left-8 z-30;
  }

  /* The base style of a tab bar button. */
  .btn-tab-bar-base {
    @apply non-draggable-area motion-safe:transition-colours-300 focus:bg-[#4d5361] hover:bg-[#2f3646] cursor-default text-white;
  }

  /* Tab bar button on macOS. */
  .btn-tab-bar-mac {
    @apply btn-tab-bar-base h-8 w-8;
  }

  /* Tab bar button on Windows. */
  .btn-tab-bar-win {
    @apply btn-tab-bar-base h-full w-[45.8px];
  }

  /* Container for the preference option area. */
  .container-preference-options {
    @apply col-span-2 flex items-end justify-end pb-1;
  }

  /* Container for the preference header and explanation area. */
  .container-preference-text {
    @apply col-span-3 flex flex-col pr-2 space-y-1;
  }
  /* Container for the preferences. */
  .container-preferences {
    @apply px-block py-4 gap-4 grid grid-cols-5 max-w-[50rem];
  }

  /* Container for the root. */
  .container-root {
    @apply antialiased flex flex-col font-sans;
  }

  /* Container for the tab bar. */
  .container-tab-bar {
    -webkit-app-region: drag;
    height: var(--tab-bar-height);
    @apply bg-slate-900 flex items-center overflow-hidden;
  }

  /* Container for a view. */
  .container-view {
    @apply grow h-screen relative;
  }
}

@layer utilities {
  /* Max width for a card or card-like block. */
  .max-w-card {
    @apply max-w-xs sm:max-w-sm lg:max-w-lg;
  }

  /* Non-draggable area in the frameless window's draggable area. */
  .non-draggable-area {
    -webkit-app-region: no-drag;
  }

  /* Horizontal padding for a general block. */
  .px-block {
    @apply !px-4 sm:!px-6 lg:!px-8;
  }

  /* Vertical padding for a general block. */
  .py-block {
    @apply py-4 sm:py-6 lg:py-8;
  }

  /* Content text. */
  .text-content {
    @apply text-gray-500 dark:text-gray-400;
  }

  /* Primary text. */
  .text-primary {
    @apply text-gray-900 dark:text-gray-50;
  }

  /* Red primary text. */
  .text-primary-red {
    @apply text-red-600 dark:text-red-400;
  }

  /* Secondary text. */
  .text-secondary {
    @apply text-gray-600 dark:text-gray-300;
  }

  /* Subtitle text. */
  .text-subtitle {
    @apply font-semibold text-gray-700 dark:text-gray-200 text-base;
  }

  /* Title text. */
  .text-title {
    @apply text-primary font-bold text-lg;
  }

  /* Transition for some colour properties within 300ms. */
  .transition-colours-300 {
    @apply duration-300 transition-colors;
  }

  /* Transition for the opacity property within 300ms. */
  .transition-opacity-300 {
    @apply duration-300 transition-opacity;
  }
}

/* The customised round button style. */
.e-btn.e-round .e-btn-icon {
  font-size: 18px !important;
}

/* The customised date range picker range style. */
.e-daterangepicker.e-popup
  .e-calendar
  .e-content
  .e-range-hover:not(.e-selected),
.e-daterangepicker.e-popup
  .e-calendar
  .e-content
  .e-range-hover:not(.e-selected)
  span {
  @apply dark:!bg-gray-600;
}

/* The customised date range picker range style on hover. */
.e-daterangepicker.e-popup
  .e-calendar
  .e-range-hover:not(.e-selected):hover
  span.e-day {
  @apply dark:!bg-gray-500;
}

/* The grid's customised empty row style. */
.e-grid .e-emptyrow td {
  @apply !p-[0.35rem];
}

/* The grid's customised frozen content style. */
.e-grid .e-frozen-left-content.e-frozencontent {
  @apply !border-r-0;
}

/* The grid's customised frozen scroll bar style. */
.e-grid .e-frozenscrollbar {
  @apply border-gray-600 border-r-[3px];
}

/* The customised style of the grid's header cell with filtering and sorting enabled. */
.e-grid .e-gridheader .e-sortfilter .e-headercelldiv {
  @apply !pr-2;
}

/* The grid's customised header cell style. */
.e-grid .e-headercelldiv {
  font-size: 14px !important;
}

/* The grid's customised stacked header cell style. */
.e-grid .e-stackedheadercelldiv {
  font-size: 14px !important;
}

/* The customised pager constant style. */
.e-pager .e-pagerconstant {
  @apply !m-0;
}

/* The customised pager parent message bar style. */
.e-pager div.e-parentmsgbar {
  @apply !pt-[6px];
}

/* Force the pop-up height and position to be fixed. */
.e-popup-fixed {
  @apply !fixed !max-h-fit;
}

/* The customised horizontal tab scroll bar navigation style. */
.e-tab .e-tab-header .e-hscroll .e-scroll-nav {
  @apply non-draggable-area !bg-gray-700;
}

/* The customised horizontal tab scroll bar navigation arrow style. */
.e-tab
  .e-tab-header
  .e-hscroll:not(.e-scroll-device)
  .e-scroll-nav
  .e-nav-arrow,
.e-tab .e-tab-header .e-scroll-nav .e-nav-arrow {
  @apply !text-gray-400;
}

/* The customised horizontal tab scroll bar style on hover and focus.  */
.e-tab .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus,
.e-tab
  .e-tab-header
  .e-hscroll:not(.e-scroll-device)
  .e-scroll-nav:focus
  .e-nav-arrow,
.e-tab
  .e-tab-header
  .e-hscroll:not(.e-scroll-device)
  .e-scroll-nav:focus
  .e-nav-arrow:hover,
.e-tab
  .e-tab-header
  .e-hscroll:not(.e-scroll-device)
  .e-scroll-nav.e-overlay
  .e-nav-arrow:hover,
.e-tab
  .e-tab-header
  .e-hscroll:not(.e-scroll-device)
  .e-scroll-nav
  .e-nav-arrow:hover,
.e-tab
  .e-tab-header
  .e-scroll-nav
  .e-nav-arrow:hover
  .e-tab
  .e-tab-header
  .e-scroll-nav:focus,
.e-tab .e-tab-header .e-scroll-nav:focus .e-nav-arrow,
.e-tab .e-tab-header .e-scroll-nav:focus .e-nav-arrow:hover,
.e-tab .e-tab-header .e-scroll-nav.e-overlay .e-nav-arrow:hover {
  @apply !bg-transparent !text-indigo-600 dark:!text-cyan-400;
}

/* The customised tab item text area style. */
.e-tab .e-tab-header .e-toolbar-item .e-icon-left + .e-tab-text {
  @apply !mb-0;
}

/* The customised tab item icon area style. */
.e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
  @apply items-center;
}

/* The customised horizontal tab header style. */
.e-tab .e-tab-header:not(.e-vertical) {
  @apply border-b-0;
}

/* The customised horizontal tab item close icon style. */
.e-tab
  .e-tab-header:not(.e-vertical)
  .e-toolbar-item
  .e-close-icon:not(:hover) {
  @apply text-gray-400 dark:text-gray-300;
}

/* The customised horizontal tab item text wrap style. */
.e-tab .e-tab-header:not(.e-vertical) .e-toolbar-item .e-tab-wrap {
  @apply pl-5 pr-3 text-gray-400 dark:text-gray-300;
}

/* The customised horizontal tab item (excluding the separator) style. */
.e-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-separator) {
  @apply px-0;
}

/* The customised vertical tab header style. */
.e-tab .e-tab-header.e-vertical::before {
  @apply border-gray-200 dark:border-gray-600;
}

/* The customised vertical tab item container style. */
.e-tab .e-tab-header.e-vertical .e-toolbar-item .e-tab-wrap {
  @apply !px-0;
}

/* The customised vertical tab item style. */
.e-tab .e-tab-header.e-vertical .e-toolbar-item:not(.e-separator) {
  @apply px-block;
}

/* The customised left vertical tab style. */
.e-tab.e-vertical-tab.e-vertical-left {
  @apply !h-screen;
}

/* The customised draggable tab item style. */
.e-tab-clone-element {
  @apply !bg-gray-600 !text-gray-300;
}

/* The customised draggable tab item close icon style. */
.e-tab-clone-element .e-icons.e-close-icon {
  @apply ml-2;
}

/* The customised draggable tab item wrap style. */
.e-tab-clone-element .e-tab-wrap,
.e-tab-clone-element .e-tab-wrap .e-tab-icon {
  @apply !pl-5 !pr-3 !text-gray-300;
}

/* The customised draggable tab item (excluding the separator) style. */
.e-tab-clone-element:not(.e-separator) {
  @apply !pl-0 !pr-1.5;
}
